﻿@namespace Code.Shared
@inject IPopupService PopupService  

<div class="@Class" style="@Style">
    @if (ComponentType != null)
    {
        <DynamicComponent Type="@ComponentType"/>
    }
    else
    {
        <MCard Dark>
            <MCardText>
                 <MMarkdownIt Scope="desc" Source="@Intro" Class="markdown-parser__highlight"/>
            </MCardText>
        </MCard>
    }
</div>

<style>
    .markdown-parser__highlight pre {
      overflow: auto;
      background-color: #f0f3f9 !important;
      color: #000000;
      border-radius: 4px;
      padding: 8px;
    }
    
    .markdown-parser__highlight code {
      background-color: unset !important;
    }
    pre  code {
        margin: 0;
        font-size: 85%;
        padding: 0.5em;
        border-radius: 5px;
        display: block;
        overflow: auto;
        white-space: pre;
        font-family: mononoki,Consolas,"Liberation Mono",Menlo,Courier,monospace,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol","Android Emoji","EmojiSymbols";
        background-size: 20px 20px;
        background-image: url();
        word-break: initial;
        word-wrap: normal;
    }
            
    .markdown-parser__highlight p {
      margin-bottom: 0;
    }
    table {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
    }
    table th {
        background:#b5cfd2;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    table td {
        background:#dcddc0;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
</style>